<template>
  <view class="containter">
    <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
      <view slot="top">
        <uv-navbar title="接单大厅" placeholder leftIconSize="0"></uv-navbar>
        <view class="header" slot="top">
<!--          <view class="userInfo">
            <view class="team flex flex-between align-center">
              <view class="team-fl flex align-end">
                <view class="team-name">
                  {{deptInfo.name}}
                </view>
                <view class="team-dept">
                  部门：{{deptInfo.organize_name }}
                </view>
              </view>
              
            </view>
          </view> -->
          <view class="tabInfo flex flex-between align-center">
            <view class="tabInfo-fl flex">
              <view class="tabs-item" @click="setIndex(index)" :class="currentIndex == index?'active':''"
                v-for="(item, index) in tabList" :key="index">
                <text class="name">{{item.name}}</text>
                <view class="box" v-if="index == 1">
                  <uv-badge numberType="overflow" type="error" max="99" :value="count"></uv-badge>
                </view>
              </view>
            </view>
            <image @click="toSearchPage" class="search-icon" src="../../static/images/search.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="warpper">
        <List :dataList="dataList"></List>
      </view>
    </z-paging>
    <uv-modal ref="modal" title="温馨提示" align="center" content='为了及时接收推送信息,请开启订阅通知' @confirm="confirm"></uv-modal>
    <Tabbar :selectedIndex="0"></Tabbar>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        tabList: [{
            name: "已接单"
          },
          {
            name: "待接单"
          },
        ],
        params: {
          is_follow: 1,
          page: 1,
          limit: 10,
          keyword: ""
        },
        deptInfo: {
          today_count: 0,
          month_count: 0,
          organize_name: "xxx部门",
          name: "xxx"
        },
        dataList: [],
        count: 0,
        currentIndex: 0,
        userInfo: {}
      }
    },
    onShow() {
      this.stat();
      this.$nextTick(() => {
        this.$refs.paging.reload();
      })
      this.userInfo = uni.getStorageSync('userInfo');
    },
    onLoad() {
      // this.$refs.modal.open();
      // this.subScribeMsg();
    },
    methods: {
       // 订阅信息
      // subScribeMsg() {
      //   console.log("判断是否订阅过消息");
      //   uni.getSetting({
      //     withSubscriptions: true,
      //     success(res) {
      //       console.log('1', res.subscriptionsSetting);
      //       if (!res.subscriptionsSetting.mainSwitch) {
      //         uni.openSetting({ //打开设置页
      //           success(res) {
      //             console.log(res.authSetting);
      //           }
      //         })
      //       } else {
      //         uni.requestSubscribeMessage({
      //           tmplIds: ['tYK3P9MVJCp06g6To_nd1tZTyS5_QJAlq40puUI9UIw', ],
      //           success(res) {
      //             console.log(res);
      //             if (res['tYK3P9MVJCp06g6To_nd1tZTyS5_QJAlq40puUI9UIw'] == "accept") { // 用户点击确定后
      //               uni.showToast({
      //                 title: "订阅成功",
      //                 icon: 'none',
      //                 mask: true,
      //                 duration: 1000,
      //               })
      //             }
      //           }
      //         })
      //       }
      //     }
      //   })
      // },
      confirm() {
        uni.requestSubscribeMessage({
          tmplIds: ['tYK3P9MVJCp06g6To_nd1tZTyS5_QJAlq40puUI9UIw'], // 需要订阅的模板ID数组
          success: (res) => {
            console.log("用户是否订阅", res);
            // res.errMsg = "requestSubscribeMessage:ok"
            // 根据返回的结果判断用户是否同意订阅
            // if (res['template_id_1'] === 'accept') {
            //   uni.showToast({
            //     title: "订阅成功",
            //     icon: 'none',
            //     mask: true,
            //     duration: 1000,
            //   })
            // }
          },
          fail: (err) => {
            console.error('请求订阅消息失败：', err);
          }
        });
      },
      toSellerListPage() {
        uni.navigateTo({
          url: "/pages/home/sellerList"
        })
      },
      handleBack() {
        uni.removeStorageSync("token");
        uni.reLaunch({
          url: "/pages/login/index"
        })
      },
      // 统计
      stat() {
        reqApi.setStat({}).then(res => {
          console.log("派单统计", res);
          this.deptInfo = res.data;
        })
      },
      // 派单大厅列表
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.getList(this.params).then(res => {
          console.log("返回的结果", res);
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          this.$refs.paging.complete(res.data.list);
          this.count = res.data.wait_count;
        })
      },
      setIndex(index) {
        this.currentIndex = index;
        this.params.is_follow = index == 0 ? 1 : 0;
        this.dataList = [];
        this.$refs.paging.reload();
      },
      toSearchPage() {
        uni.navigateTo({
          url: "/pages/home/search?type=2"
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .member {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #1071E7;
  }

  .box {
    position: absolute;
    top: 10rpx;
    right: -10rpx;
  }

  .paidan {
    padding: 24rpx 76rpx;
    box-sizing: border-box;
    background: #fff;

    .btn {
      width: 100%;
      height: 88rpx;
      background: #1071E7;
      border-radius: 44rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .active {
    .name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500 !important;
      font-size: 32rpx !important;
      color: #323233 !important;
    }

  }

  .active::after {
    position: absolute;
    content: " ";
    width: 32rpx;
    height: 8rpx;
    background: #1071E7;
    border-radius: 5rpx;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .containter {

    .header {
      padding: 24rpx 28rpx 0 28rpx;
      box-sizing: border-box;
      background: #fff;

      .tabInfo {
        height: 88rpx;

        .tabInfo-fl {
          flex: 1;
          height: 88rpx;
          line-height: 88rpx;

          .tabs-item {
            height: 100%;
            margin-right: 54rpx;
            position: relative;

            .name {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #969799;
            }
          }
        }

        .search-icon {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .userInfo {
        border-radius: 10rpx;
        box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(233, 235, 239, 0.6);
        margin-bottom: 24rpx;

        .team {
          height: 106rpx;
          background: linear-gradient(to right, #0992F5 0%, #1071E7 100%);
          border-radius: 10rpx 10rpx 0 0;
          padding: 0 28rpx;
          box-sizing: border-box;

          .team-fl {
            .team-name {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 36rpx;
              color: #F7F8FA;
              margin-right: 28rpx;
            }

            .team-dept {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #F7F8FA;
            }
          }

          .back-icon {
            width: 48rpx;
            height: 48rpx;
          }
        }

        .quantity {
          height: 96rpx;
          padding: 22rpx 28rpx;
          box-sizing: border-box;

          .quantity-item {
            flex: 1;

            .quantity-item-label {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #323233;
              margin-right: 80rpx;
            }

            .quantity-item-value {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #1071E7;
            }
          }
        }
      }
    }
  }
</style>